<script setup lang="ts">
    import YunDraft from "@/components/YunDraft.vue";
    import YunKeyboard from "@/components/YunKeyboard.vue";
    import YunWordleContainer from "@/components/YunWordleContainer.vue";
</script>

<template>
    <div class="wordle-container">
        <div class="wordle-container__left">
            <YunWordleContainer />
        </div>
        <div class="wordle-container__right">
            <YunDraft />
            <div class="br"></div>
            <YunKeyboard />
        </div>
    </div>
</template>

<style lang="scss" scoped>
    div.wordle-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        div.wordle-container__left {
            grid-area: left;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 360px;
        }
        div.wordle-container__right {
            grid-area: right;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            div.br {
                height: 96px;
            }
        }
    }
</style>
